<template>

  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">跟进客户沟通</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div>
            <div
              class="tabletitle"
              style="float: left;margin-left: -10px;margin-top: 20px;margin-bottom: 20px;"
            >
              <h4>跟进记录</h4>
            </div>
            <div style="float: right;">
              <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
                <div style="margin-left:5px"  v-if="zhuli">
                  <el-button class="newcon" size="small" round @click="addClick">新增</el-button>
                </div>
              </el-row>
            </div>
            <el-table class="resutable" :data="tableData1" ref="table1">
              <el-table-column label="客户简称" width="120">
              <template slot-scope="scope">
                <span>{{scope.row.customerName}}</span>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="跟进人"></el-table-column>
            <el-table-column label="跟进时间">
              <template slot-scope="scope">
                <span>{{scope.row.followTime | converTime("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="followMethod" label="跟进方式"></el-table-column>
            <el-table-column prop="content" label="沟通内容"></el-table-column>
            <el-table-column prop="result" label="沟通结果"></el-table-column>
            <el-table-column prop="feedbackInfo" label="反馈信息"></el-table-column>
            </el-table>
            <div class="pager">
              <el-pagination
                @size-change="handleSizeChange1"
                @current-change="pagehandleCurrentChange1"
                :current-page="currentPage1"
                :page-sizes="[5,10,15]"
                :page-size="pagesize1"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalcount1"
              ></el-pagination>
            </div>
          </div>

          <el-row type="flex" justify="center">
            <el-col>
              <div class="tabletitle" style="float: left;margin-left: -10px;line-height: 43px;">
                <h4>基本情况</h4>
              </div>
            </el-col>
          </el-row>

          <el-table
            style="margin-top: 20px;"
            class="resutable"
            :data="tableData"
            ref="multipleTable"
          >
            <el-table-column label="客户简称" width="120">
              <template slot-scope="scope">
                <span>{{scope.row.customerName}}</span>
              </template>
            </el-table-column>

            <el-table-column prop="target" label="沟通对象"></el-table-column>
            <el-table-column label="时间">
              <template slot-scope="scope">
                <span>{{scope.row.time | converTime("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="沟通人"></el-table-column>
            <el-table-column prop="customerStatus" label="客户目前状态"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div v-if="type == 5">
      <add-Followup v-if="addShow" :currentData="currentrow" @getData="getData1" ref="addFollowup"></add-Followup>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import AddFollowup from "./addFollowup.vue";
import tagsView from "../../store/modules/tagsView";

export default {
  name: "followupCommunication",
  components: {
    AddFollowup,
  },
  data() {
    return {
      secondshow: false,
      newcolor: false,
      newcolor1: false,
      zhuli: false,
      key: true,
      tableData: [],
      currentrow: null,
      currentPage: 1,
      pagesize: 15,
      totalcount: 0,
      tableData1: [],
      currentPage1: 1,
      pagesize1: 5,
      totalcount1: 0,
      detailcode: "",
      detailno: "",
      type: null,
      secondtitle: "",
      addShow: false
    };
  },
  created() {
    this.success();
    this.getresult();
    if (tagsView.state.identity == 3) {
      this.zhuli = true;
    }
  },
  methods: {
    //跟进记录
    getresult() {
      axios
        .post(this.url + "/assistantcommunicate/getfollowdata", {
          id: this.$route.query.id,
          pageNum: this.currentPage1,
          pageSize: this.pagesize1
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData1 = res.data.data.list;
            this.totalcount1 = res.data.data.total;
          }
        });
    },
    getData1() {
      this.addShow = false;
      this.secondshow = false;
      this.currentrow = null;
      this.currentPage1 = 1;
      this.getresult();
      this.success();
    },
    success() {
      axios
        .post(this.url + "/assistantcommunicate/getassistantdetail", {
          id: this.$route.query.id
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.data !== null) {
              this.tableData = res.data.data;
            }
          }
        });
    },
    tableshow(row) {
      this.addShow = false;
      this.secondshow = false;
      this.currentrow = null;
      this.type = null;
      this.success();
      this.getresult();
    },
    addClick() {
        this.addShow = !this.addShow;
        this.secondtitle = "新增跟进记录";
        this.secondshow = !this.secondshow;
        this.type =5;
        this.currentrow = this.tableData[0];
        //修改子组件的事件触发
        if (this.$refs.addFollowup) {
          this.$refs.addFollowup.clearData();
          this.$refs.addFollowup.resetFields("form");
        }
    },
    handleSizeChange1(val) {
      this.pagesize1 = val;
      this.getresult();
    },
    pagehandleCurrentChange1(val) {
      this.currentPage1 = val;
      this.getresult();
    }
  }
};
</script>
<style scoped>
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.textactive {
  color: #1099ff;
}

.posttable {
  min-height: 700px;
  background-color: #fff;
}

.push {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
  padding: 7px 15px !important;
}

.push:hover {
  color: #fff !important;
}

.back {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #8490e2 0%, #6f7acc 100%);
  padding: 7px 15px !important;
}

.back:hover {
  color: #fff !important;
}

.active {
  background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
}

.active1 {
  background: linear-gradient(to bottom, #6676e0 0%, #5260c7 100%);
}

.resutable {
  background-color: #fff;
}

.pager {
  margin-top: 20px;
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
.newcon {
  width: 65px;
  height: 28px;
  padding: 7px 15px !important;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
}
.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}

.resumeLink {
  cursor: pointer;
  color: #1198ff;
  text-decoration: none;
}
.edit {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  padding: 7px 15px !important;
}
.line {
  height: 1px;
  background-color: #c8c8c8;
  margin-top: 3px;
  margin-bottom: 20px;
}

.darkline {
  height: 1px;
  background-color: #4288c3;
  margin-top: 10px;
  margin-bottom: 20px;
}

.lightLine {
  height: 1px;
  background-color: #cccccc;
  margin-top: 10px;
  margin-bottom: 10px;
}

.tablelist {
  width: 100%;
  /*overflow-x:scroll;*/
}
</style>
